<template>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏部分 -->
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <!-- 编辑器部分 -->
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
  <el-button @click="getContent">获取富文本的内容</el-button>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 模式
const mode = ref('default')

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')

// 工具条配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig: any = { placeholder: '请输入内容...', MENU_CONF: {} }

type InsertFnType = (fileUrl: string) => void
editorConfig.MENU_CONF['uploadImage'] = {
  // 上传图片的配置
  server: import.meta.env.VITE_BASEURL + 'file/upload',
  fieldName: 'file', // 上传时，传递给后台的字段名，要按照后台的要求来
  onSuccess(file: any, res: any) {
    console.log('onSuccess', file, res)
  },
  // 自定义插入图片
  customInsert(res: any, insertFn: InsertFnType) {
    // TS 语法
    // customInsert(res, insertFn) {                  // JS 语法
    // res 即服务端的返回结果

    // 从 res 中找到 url alt href ，然后插入图片到下面的编辑框
    insertFn(res.fileUrl)
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const getContent = () => {
  console.log(valueHtml.value)
}
</script>
